// Dependencies.
@import 'components/divider/divider';

// Grouping content


// Block quotes
//
// The `<blockquote>` element is for quoting blocks of content from another
// source within your document. Wrap the `<blockquote>` around any <abbr
// title="HyperText Markup Language">HTML</abbr> as the quote. For straight
// quotes, we recommend a `<p>`.
//
// Optionally, add a `<footer>` to identify the source of the quote, wrapping
// the name of the source work in `<cite>`.

blockquote {
  // Set 1 unit of vertical rhythm on the top and bottom margin.
  // Also indent the quote on both sides.
  @include margin(1 $indent-amount);
}

// Lists
//
// Style guide: base.grouping.lists

// Unordered list
//
// The `<ul>` element is a list of items in which the order does <em>not</em>
// explicitly matter.

// Ordered list
//
// The `<ol>` element is a list of items in which the order <em>does</em>
// explicitly matter.

// Description list
//
// The `<dl>` element is a list of terms with their associated descriptions.

dl,
ol,
ul {
  // Add vertical rhythm margins.
  @include margin(1 0);
}

dt {
  // Add your styles.
}

dd {
  margin: 0 0 0 $indent-amount;

  @include rtl {
    margin: 0 $indent-amount 0 0;
  }
}

ol,
ul {
  padding: 0 0 0 $indent-amount;

  @include rtl {
    padding: 0 $indent-amount 0 0;
  }

  // Turn off margins on nested lists.
  ol,
  ul {
    margin: 0;
  }
}

// Figures
//
// The `<figure>` element can be used to annotate illustrations, diagrams,
// photos, code listings, etc.
//
// Optionally, a `<figcaption>` element inside the `<figure>` represents the
// caption of the figure.

figure {
  // Add vertical rhythm margins.
  @include margin(1 0);
}

figcaption {
  // Add your styles.
}

// Horizontal rule
//
// The `<hr>` element represents a paragraph-level thematic break, e.g. a scene
// change in a story, or a transition to another topic within a section of a
// reference book.

hr {
  @extend %divider;
  // Add the correct box sizing in Firefox.
  box-sizing: content-box;
  height: 0;
  // Show the overflow in Edge and IE.
  overflow: visible;
}

// Main
//
// The `<main>` element represents the main content of the page.

main {
  // Add your styles.
}

// Body copy
//
// The default `font-size` and `line-height` properties are applied to the
// `<body>` element and all paragraphs. In addition, `<p>` (paragraphs) receive
// a top and bottom margin.

p,
pre {
  @include margin(.75 0);
}

// Preformatted text
//
// The `<pre>` element represents a block of preformatted text, such as
// fragments of computer code, ASCII art, etc.

%monospace {
  // Correct the inheritance and scaling of font size in all browsers.
  // The font-family value ends with ", serif".
  @include typeface(monospace);
  // Correct the odd `em` font sizing in all browsers.
  font-size: 1em;
}

pre {
  @extend %monospace;
}
